<template>
    <HeaderTitle title="查询报表"></HeaderTitle>
    <div v-for="(item, index) in showReportList" :key="index" class="column items-center q-pa-md q-col-gutter-sm">
      <div :class="item.myClass" @click="item.routing()">
        {{ item.title }}
        <q-icon :name="item.iconName" class="subBtnSVG"/>
      </div>
    </div>

   <!--  <div class="column items-center q-pa-md q-col-gutter-sm" v-if="role === 'WORKER'">
      <div class="col btn-br5 text-center stockBtn" @click="routeToSubpage('SR')">
        员工货存查询/存金报告
        <q-icon name="fa-solid fa-boxes-stacked fa-3x" class="subBtnSVG"/>
      </div>
      <div class="col btn-br5 text-center reportBtn" @click="routeToSubpage('DR')">
        员工交收报表二(手工帐)
        <q-icon name="fa-solid fa-list fa-3x" class="subBtnSVG"/>
      </div>
      <div class="col btn-br5 text-center enquiryBtn" @click="routeToSubpage('DE')">
        员工交收查询
        <q-icon name="fa-solid fa-right-left fa-3x" class="subBtnSVG"/>
      </div>
    </div> -->

    <!-- QC, -->
   <!--  <div class="column items-center q-pa-md q-col-gutter-sm" v-else-if="role === 'QC' || role === 'LEADER' || role === 'STONEINSPECTOR'">
      <div class="col btn-br5 text-center stockBtn" @click="routeToSubpage('RSR')">
        实时存货报表
        <q-icon name="fa-solid fa-boxes-stacked fa-3x" class="subBtnSVG"/>
      </div>
      <div class="col btn-br5 text-center reportBtn" @click="routeToSubpage('PTIR')">
        检测货品交易报表
        <q-icon name="fa-solid fa-list fa-3x" class="subBtnSVG"/>
      </div>
    </div>

    <div class="column items-center q-pa-md q-col-gutter-sm" v-else-if="role === 'DISPATCHER'">
      <div class="col btn-br5 text-center stockBtn" @click="routeToSubpage('RSR')">
        实时存货报表
        <q-icon name="fa-solid fa-boxes-stacked fa-3x" class="subBtnSVG"/>
      </div>
      <div class="col btn-br5 text-center reportBtn" @click="routeToSubpage('PTIR')">
        检测货品交易报表
        <q-icon name="fa-solid fa-list fa-3x" class="subBtnSVG"/>
      </div>
      <div class="col btn-br5 text-center enquiryBtn" @click="routeToSubpage('LR')">
        各工序节点Leadtime报表
        <q-icon name="fa-solid fa-timeline fa-3x" class="subBtnSVG"/>
      </div>
      <div class="col btn-br5 text-center printstatusBtn" @click="routeToSubpage('PLSR')">
        生产单标签打印状况报表
        <q-icon name="fa-solid fa-print fa-3x" class="subBtnSVG"/>
      </div> -->
  <!--   </div> -->
</template>

<script setup>
import HeaderTitle from 'src/components/HeaderTitle.vue'
import { useRouter } from 'vue-router'
import { useUserStore } from 'src/stores/modules/userStore'
import { ref, computed } from 'vue'
const $router = useRouter()
const userStore = useUserStore()

const role = (userStore.currentDept != null) ? userStore.currentDept.roleGroup : null




// testing
// const role = 'WORKER'
// const role = 'QC'
// const role = 'DISPATCHER'

console.log('current Role: ', role)

const routeToSubpage = (page) => {
  // WORKER Pages: SR=员工货存查询/存金报告 | DR=员工交收报表二(手工帐) | DE=员工交收查询
  // QC Pages: RSR=实时存货报表 | PTIR=检测货品交易报表
  // WORKER Pages: RSR=实时存货报表 | PTIR=检测货品交易报表 | LR=各工序节点Leadtime报表 | PLSR=生产单标签打印状况报表
  console.log('clicked Page: ', page);

  (page === 'SR') ? $router.push('/stockReport')
    : (page === 'DR') ? $router.push('/deliveryReport')
        : (page === 'DE') ? $router.push('/deliveryEnquiry')
          : (page === 'WE') ? $router.push('/workerEnquiry')
              : (page === 'RSR') ? $router.push('/realtimeStockReport')
                  : (page === 'PTIR') ? $router.push('/productTransactInspectReport')
                      : (page === 'LR') ? $router.push('/leadtimeReport')
                          : (page === 'PLSR') ? $router.push('/printLabelStatusReport')
                              : console.log('Unknown Page')
}

const reportList = ref([
  {title:'员工货存查询/存金报告', routing:()=>routeToSubpage('SR'), iconName:'fa-solid fa-boxes-stacked fa-3x', myClass:'col btn-br5 text-center stockBtn', show:userStore.currentPerm.report_worker_storage_perm /* to be confirm */},
  {title:'员工交收报表', routing:()=>routeToSubpage('DR'), iconName:'fa-solid fa-list fa-3x', myClass:'col btn-br5 text-center reportBtn', show:userStore.currentPerm.report_worker_handset_perm /* to be confirm */},
  {title:'员工交收报表二 (手工帐)', routing:()=>routeToSubpage('DE'), iconName:'fa-solid fa-list fa-3x', myClass:'col btn-br5 text-center enquiryBtn', show:userStore.currentPerm.report_worker_transaction_perm /* to be confirm */},
  {title:'员工签收查询', routing:()=>routeToSubpage('WE'), iconName:'fa-solid fa-list fa-3x', myClass:'col btn-br5 text-center enquiryBtn', show:userStore.currentPerm.report_worker_handover_perm /* to be confirm */},
  {title:'实时存货报表', routing:()=>routeToSubpage('RSR'), iconName:'fa-solid fa-boxes-stacked fa-3x', myClass:'col btn-br5 text-center stockBtn', show:userStore.currentPerm.report_qc_handset_perm /* to be confirm */},
  {title:'检测货品交易报表', routing:()=>routeToSubpage('PTIR'), iconName:'fa-solid fa-list fa-3x', myClass:'col btn-br5 text-center reportBtn', show:userStore.currentPerm.report_qc_transaction_perm /* to be confirm */},
  {title:'各工序节点Leadtime报表', routing:()=>routeToSubpage('LR'), iconName:'fa-solid fa-timeline fa-3x', myClass:'col btn-br5 text-center enquiryBtn', show:userStore.currentPerm.report_leadtime_perm /* to be confirm */},
  {title:'生产单标签打印状况报表', routing:()=>routeToSubpage('PLSR'), iconName:'fa-solid fa-list fa-3x', myClass:'col btn-br5 text-center printstatusBtn', show:userStore.currentPerm.report_printstatus_perm /* to be confirm */},
])

const showReportList = computed(()=>{
  return reportList.value.filter(i=>i.show)
})
</script>

<style lang="scss">

.stockBtn, .enquiryBtn, .reportBtn, .printstatusBtn{
    width: 70%;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    border: 1px solid #FFFFFF;
    @media (max-width:480px){
      width: 90%;
    }
}

.stockBtn{
    margin-top: 20px;
    background-color: #4254AD;
}

.reportBtn{
    background-color: #7088FF;
}

.enquiryBtn{
    background-color: #99AAFF;
}

.printstatusBtn{
  background-color: #5D6FC8;
}

.subBtnSVG{
  margin-bottom:5px;
  margin-left: 5px;
}
</style>
